<template>
    <div id="detail">
        <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>
       
        <scroll class="content" ref="scroll" @scroll="contentScroll" :probe-type="3">
            <detail-swiper :top-images="topImages"></detail-swiper>
            <detail-base-info :goods="goods"></detail-base-info>
            <detail-shop-info :shop="shop"></detail-shop-info>
            <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
            <detail-param-info :param-info="paramInfo" ref="params"/>
        </scroll>
        
        <detail-bottom-bar @addCart="addCart"/>
        <back-top v-show="isShowBackTop" @click.native="backTop"/>
      
    </div>
    
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'

import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailBottomBar from './childComps/DetailBottomBar'

import {getDetail,Goods,Shop,GoodsParam} from "network/detail/";
import {backTopMixin} from "common/mixin";
import Scroll from 'components/common/scroll/Scroll'



// import Toast from 'components/common/toast/Toast'



export default {
    name: "Detail",
    components:{
      
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        Scroll,
        DetailGoodsInfo,
        DetailParamInfo,
        DetailBottomBar,
    
    
        


    },
     mixins: [backTopMixin],
    data(){
        return{
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            themeTopYs:[],
            currentIndex:0,
            itemInfo:{},
         
        }
    },
    methods:{
        imageLoad(){
            this.$refs.scroll.refresh()
            this.themeTopYs = [];
            this.themeTopYs.push(0);
            this.themeTopYs.push(this.$refs.params.$el.offsetTop-100)

        },
        titleClick(index){
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
        },
        contentScroll(position){
            const positionY = -position.y
            let length = this.themeTopYs.length
            for(let i=0; i<length;i++){
                // if(positionY>this.themeTopYs[i] && positionY <this.themeTopYs[i+1]){
                //     console.log(i)
                // }
                if(this.currentIndex !==i &&
                ((i<length-1 && positionY>=this.themeTopYs[i] && positionY <this.themeTopYs[i+1])||(i===length-1 && positionY>=this.themeTopYs[i]))){
                    this.currentIndex = i
                    this.$refs.nav.currentIndex = this.currentIndex


                }

            }
            this.listenShoBackTop(position)
        },
        addCart(){
            const product = {}
            product.image = this.topImages[0]
            product.title = this.itemInfo.title
            product.desc = this.itemInfo.desc
            product.price = this.itemInfo.lowNowPrice
            product.iid = this.iid;

            this.$store.dispatch('addCart',product).then(res=>{
                // console.log(this.$toast)
                // console.log(this.$toast.data)
                //  console.log(this.$toast.data.message)
                // console.log(this.$toast.methods)
                // console.log(this.$toast.message)
                this.$toast.show(res,2000)
            })

            
        }
        

    },
    created(){
        this.iid = this.$route.params.iid;
        getDetail(this.iid).then(res=>{
            const data = res.result
            this.topImages = data.itemInfo.topImages

            this.shop = new Shop(data.shopInfo)
            this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
            this.detailInfo = data.detailInfo;
            this.itemInfo = data.itemInfo
            this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)

            // this.$nextTick(()=>{
            //     this.themeTopYs = [];
            //     this.themeTopYs.push(0);
            //     this.themeTopYs.push(this.$refs.params.$el.offsetTop)
            // })
        })
    },
    updated(){
        

    }

}
</script>

<style scoped>
    /* #detail{
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    } */
    /* .detail-nav{
        position: relative;
        z-index: 9;
    }
    .content{
        overflow: hidden;
        position: absolute;
        top:44px;
        bottom:0px;
        left: 0;
        right: 0;
    } */
    #detail{
        position: relative;
        z-index:9;
        height: 100vh;
        background-color: #fff;
        
    }
    .content{
        height: calc(100% - 44px - 49px);
    }
    .detail-nav{
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
    </style>